[자바스크립트] 화면, 브라우저, 클라이언트의 높이, 너비(폭) 불러오는 속성

동적인 화면을 구성하기 위해서는 브라우저의 크기와 현재값을 알아둘 필요가 있습니다. 현재의 디바이스가 가지는 최대 width 너비의 크기등을 말이죠. 얻을 수 있는 값들 중 크기 순으로 정렬하자면 아래와 같습니다
clientHeight > offsetHeight > scrollHeight
위 순서대로의 크기를 가집니다. 좀 더 자세하게 알아보도록하겠습니다.

1. clientheight

이 값은 스크롤바의 공간을 제외한 부분입니다.

2. offsetHeight

스크롤바가 나타나는 부분까지의 길이입니다.

3. scrollHeight

는 스크롤이 안 보이는 영역까지의 길이입니다.




현재 화면에서 실제로 사용가능한 최대치의 폭 및 높이를 반환합니다.
window.screen.availWidth
window.screen.availHeight

현재 브라우저의 전체 크기 값을 반환함
window.outerWidth
window.outerHeight


제이쿼리를 사용하면 더 간단하게 윈도우 및 문서의 폭과 width와 height값을 알아낼 수 있습니다.
$(window).width();
$(window).height();
위 코드는 실제 화면에서 나타나는 영역의 폭과 너비입니다.

$(document).width();
$(document).height();
위 코드는 문서가 가진 폭과 너비로 윈도우에서는 가려지는 부분까지 계산될 수 있어 더 넓을 수 있습니다.